<template>
  <div>
    <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen':'fullscreen'" @click="toggleScreen" />
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue"
import screenfull from "screenfull"
import { ElMessage } from 'element-plus'
const isFullscreen = ref(false)

const screenfullStatus = () => {
  isFullscreen.value = screenfull.isFullscreen
}

const init = () => {
  if (screenfull.isEnabled) {
    screenfull.on("change", screenfullStatus)
  }
}

const destroyScreen = () => {
  if (screenfull.isEnabled) {
    screenfull.off("change", screenfullStatus)
  }
}

//  swtich screen mode
const toggleScreen = () => {
  if (!screenfull.isEnabled) {
      ElMessage({
          message: 'you browser can not work',
          type: 'warning'
      })
    return false
  }
  screenfull.toggle()
  isFullscreen.value = screenfull.isFullscreen
}
onMounted(() => {
  init()
})
onUnmounted(() => {
  destroyScreen()
})
</script>
<style scoped>
.screenfull-svg {
  display: inline-block;
  cursor: pointer;
  fill: #5a5e66;
  width: 20px;
  height: 20px;
  vertical-align: 10px;
}
</style>